<template>
  <div>
    <el-upload
      :file-list="value"
      class="x-upload"
      style="min-width: 580px"
      ref="uploadEl"
      :id="`uploadEl${keys}`"
      action="action"
      :accept="accept"
      multiple
      :auto-upload="false"
      :limit="6"
      :http-request="httpRequest"
      :on-change="handleChange"
      :on-preview="handlePictureCardPreview"
    >
      <el-button type="primary" @click="uploadFile">上传文件</el-button>
      <el-button type="primary" @click="uploadFolder">上传文件夹</el-button>
      <template #tip>
        <div class="el-upload__tip">
          {{ accept ? `仅支持${accept}格式文件，` : "" }} 点击已上传文件可下载

          <span style="color: #f56c6c; font-size: 14px"
            >上传未完成途中<span style="text-decoration: underline"
              >不要点击提交或离开此页面</span
            ></span
          >
        </div>
      </template>
    </el-upload>

    <el-dialog v-model="dialogVisible">
      <img :src="dialogImageUrl" style="max-width: 100%" />
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile, fileDownload } from "@/api/file";
import { downloadFile } from "@/utils";
export default {
  props: {
    keys: {
      type: String,
      default: () => "",
    },
    value: {
      type: Array,
      default: () => [],
    },
    accept: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      timer: null,
      dialogImageUrl: "",
      dialogVisible: false,
      inputRef: null,
    };
  },
  methods: {
    /* 上传之前钩子 */
    handleChange(file) {
      if (file.status === "ready") {
        this.debounce(() => {
          this.httpRequest();
        }, 1000);
      }
    },
    /* 自定义上传 */
    async httpRequest() {
      const fileList = this.value;
      let index = fileList.findIndex(
        (t) => t.status === "ready" && !t.isUpload
      ); //拿到当前上传文件的索引
      try {
        if (index !== -1) {
          const res = await uploadFile(fileList[index].raw);
          if (res.code === 0) {
            //上传成功
            const fileObj = {
              fileUrl: res.data.minFileName,
              name: fileList[index].raw.name,
            };
            fileList[index] = fileObj;
          }
        }
      } catch (error) {
        fileList[index].isUpload = true; //标记已经上传过
        console.log(error, "error");
      } finally {
        this.$emit("update:value", fileList);
        this.httpRequest();
      }
    },
    debounce(func, delay) {
      return (() => {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(func, delay);
      })();
    },
    async handlePictureCardPreview(uploadFile) {
      const res = await fileDownload(
        uploadFile.fileUrl || uploadFile.url || uploadFile.minioFilePath
      );
      downloadFile(res, uploadFile.name);
    },

    uploadFolder() {
      const el = document
        .getElementById(`uploadEl${this.keys}`)
        .getElementsByTagName("input");
      el[0].webkitdirectory = true;
    },
    uploadFile() {
      const el = document
        .getElementById(`uploadEl${this.keys}`)
        .getElementsByTagName("input");
      el[0].webkitdirectory = false;
    },
  },
};
</script>

<style lang="scss" scoped>
/* el-upload附件列表框去除'按 delete 键可删除'提示 */

::v-deep .x-upload {
  .el-upload-list__item .el-icon-close-tip {
    display: none !important;
  }
}
</style>
